<template>
  <div>
    <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%" max-height="600">
      <el-table-column label="姓名" prop="name" align='center'>
      </el-table-column>
      <el-table-column label="工号" prop="code" align='center'>
      </el-table-column>
      <el-table-column label="职位" prop="post" align='center'>
      </el-table-column>
      <el-table-column label="状态" prop="state" align='center'>
      </el-table-column>
      <el-table-column label="入职时间" prop="date" align='center'>
      </el-table-column>
      <el-table-column label="在职时间" prop="datenum" align='center'>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
            name: '王小虎',
            code: 'JX11123',
            post: '教师',
            state: '在职',
            date: '2016-05-02',
            datenum: '15'

          },
          {
            name: '王小虎',
            code: 'JX11123',
            post: '教师',
            state: '在职',
            date: '2016-05-02',
            datenum: '15'

          },
          {
            name: '王小虎',
            code: 'JX11123',
            post: '教师',
            state: '在职',
            date: '2016-05-02',
            datenum: '15'

          },
          {
            name: '王小虎',
            code: 'JX11123',
            post: '教师',
            state: '在职',
            date: '2016-05-02',
            datenum: '15'

          },
          {
            name: '王小虎',
            code: 'JX11123',
            post: '教师',
            state: '在职',
            date: '2016-05-02',
            datenum: '15'

          },
          {
            name: '王小虎',
            code: 'JX11123',
            post: '教师',
            state: '在职',
            date: '2016-05-02',
            datenum: '15'

          },
          {
            name: '王小虎',
            code: 'JX11123',
            post: '教师',
            state: '在职',
            date: '2016-05-02',
            datenum: '15'

          },
          {
            name: '王小虎',
            code: 'JX11123',
            post: '教师',
            state: '在职',
            date: '2016-05-02',
            datenum: '15'

          },
          {
            name: '王小虎',
            code: 'JX11123',
            post: '教师',
            state: '在职',
            date: '2016-05-02',
            datenum: '15'

          },
          {
            name: '王小虎',
            code: 'JX11123',
            post: '教师',
            state: '在职',
            date: '2016-05-02',
            datenum: '15'

          },
          {
            name: '王小虎',
            code: 'JX11123',
            post: '教师',
            state: '在职',
            date: '2016-05-02',
            datenum: '15'

          },
          {
            name: '王小虎',
            code: 'JX11123',
            post: '教师',
            state: '在职',
            date: '2016-05-02',
            datenum: '15'

          },
          {
            name: '王小虎',
            code: 'JX11123',
            post: '教师',
            state: '在职',
            date: '2016-05-02',
            datenum: '15'

          },
          {
            name: '王小虎',
            code: 'JX11123',
            post: '教师',
            state: '在职',
            date: '2016-05-02',
            datenum: '15'

          },
          {
            name: '王小虎',
            code: 'JX11123',
            post: '教师',
            state: '在职',
            date: '2016-05-02',
            datenum: '15'

          },
          {
            name: '王小虎',
            code: 'JX11123',
            post: '教师',
            state: '在职',
            date: '2016-05-02',
            datenum: '15'

          },
          {
            name: '王小虎',
            code: 'JX11123',
            post: '教师',
            state: '在职',
            date: '2016-05-02',
            datenum: '15'

          },
          {
            name: '王小虎',
            code: 'JX11123',
            post: '教师',
            state: '在职',
            date: '2016-05-02',
            datenum: '15'

          }
        ]
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>

<style>
</style>
